/*
 *                        .::::.
 *                      .::::::::.
 *                     :::::::::::
 *                  ..:::::::::::'
 *               '::::::::::::'
 *                 .::::::::::
 *            '::::::::::::::..
 *                 ..::::::::::::.
 *               ``::::::::::::::::
 *                ::::``:::::::::'        .:::.
 *               ::::'   ':::::'       .::::::::.
 *             .::::'      ::::     .:::::::'::::.
 *            .:::'       :::::  .:::::::::' ':::::.
 *           .::'        :::::.:::::::::'      ':::::.
 *          .::'         ::::::::::::::'         ``::::.
 *      ...:::           ::::::::::::'              ``::.
 *     ````':.          ':::::::::'                  ::::..
 *                        '.:::::'                    ':'````..
 *
 * @Author: byx
 * @Date: 2023-01-08 14:34:56
 * @LastEditors: byx
 * @LastEditTime: 2023-01-08 14:53:31
 * @version: 1.0
 * @Descripttion: wwww.byx1024.top
 */
import classNames from 'classnames'
import propTypes from 'prop-types'

/*
 * SVG 图标组件
 * @param {String} type 图标名称
 * @param {String} className 样式类名
 * @param {*} ...rest 剩余参数，除了必传的，其他全部以 剩余参数的形式传递，解构使用（主要为事件）
 * @return
 */
function Icon({ type, className, ...rest }) {
  return (
    <svg {...rest} className={classNames('icon', className)} aria-hidden="true">
      {/* 字体图标前需要加# */}
      <use xlinkHref={`#${type}`}></use>
    </svg>
  )
}

// 给组件加属性校验（限定组件属性的数据类型）
Icon.propTypes = {
  type: propTypes.string.isRequired,
}

export default Icon
